<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/includefile.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Theme style -->
<link href="${basePath}/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/plugins/iCheck/all.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="${basePath}/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="${basePath}/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<script src="${basePath}/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${basePath}/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<style>
body{
font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑",tahoma,arial,simhei,"黑体";
}
</style>
<script>
$(document).ready(function(){
	$('#reservation').daterangepicker();
	$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
	    checkboxClass: 'icheckbox_flat-green',
	    radioClass: 'iradio_flat-green'
	  });
	$('#costDateOfMonth').val('${publicMap.costDateOfMonth}');
	$('#costDateOfType').val('${publicMap.costDateOfType}');
	$('#costType').val('${publicMap.costType}');
	$('#example2').dataTable({
        "bPaginate": true,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "oLanguage": {
			"sSearch": "过滤:",
			"sLengthMenu": "每页显示 _MENU_ 条记录", 
			"sZeroRecords": "没有记录!",
			"sInfo": "显示第_START_ 到第 _END_ ，全部_MAX_ 条 ", 
            "sInfoEmpty": "显示0条记录", 
            "oPaginate": { 
                 "sPrevious": " 上一页 ", 
                 "sNext":     " 下一页 ", 
            } 
		},
		fnDrawCallback: function(){
			//重复绑定click事件，会导致click事件失效，因此先解除绑定，再重新绑定click事件 
			$('#example2 tbody .iCheck-helper').unbind('click').bind('click',function(){
				if($(this).parent().hasClass("checked")){
					updateRowArray($(this).siblings().val(),'remove');
					$(this).parent().removeClass("checked");
					return false;
				}else{
					updateRowArray($(this).siblings().val(),'add');
					$(this).parent().addClass("checked");
					return false;
				}
		    });
		}
      });
	$('#example3').dataTable({
        "bPaginate": true,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "oLanguage": {
			"sSearch": "过滤:",
			"sLengthMenu": "每页显示 _MENU_ 条记录", 
			"sZeroRecords": "没有记录!",
			"sInfo": "显示第_START_ 到第 _END_ ，全部_MAX_ 条", 
            "sInfoEmpty": "显示0条记录", 
            "oPaginate": { 
                 "sPrevious": " 上一页 ", 
                 "sNext":     " 下一页 ", 
            } 
		},
		fnDrawCallback: function(){
			//重复绑定click事件，会导致click事件失效，因此先解除绑定，再重新绑定click事件 
			$('#example3 tbody .iCheck-helper').unbind('click').bind('click',function(){
				if($(this).parent().hasClass("checked")){
					updateRowArray2($(this).siblings().val(),'remove');
					$(this).parent().removeClass("checked");
					return false;
				}else{
					updateRowArray2($(this).siblings().val(),'add');
					$(this).parent().addClass("checked");
					return false;
				}
		    });
		}
      });
	//TABLE1 全选功能
	$('#example2 tfoot .iCheck-helper').bind('click',function(){
		if($(this).parent().hasClass('checked')){			
		 //$('#example2 tbody .iCheck-helper').parent().addClass('checked');
		 $('#example2 tbody .iCheck-helper').each(function(){
			 updateRowArray($(this).siblings().val(),'add');
			 $(this).parent().addClass('checked');
		 });
		}else{
		 //$('#example2 tbody .iCheck-helper').parent().removeClass('checked');
		 $('#example2 tbody .iCheck-helper').each(function(){
			 updateRowArray($(this).siblings().val(),'remove');
			 $(this).parent().removeClass('checked');
		 });
		}
    });
	//TABLE2 全选功能
	$('#example3 tfoot .iCheck-helper').bind('click',function(){
		if($(this).parent().hasClass('checked')){			
		 //$('#example3 tbody .iCheck-helper').parent().addClass('checked');
		 $('#example3 tbody .iCheck-helper').each(function(){
			 updateRowArray2($(this).siblings().val(),'add');
			 $(this).parent().addClass('checked');
		 });
		}else{
		 //$('#example3 tbody .iCheck-helper').parent().removeClass('checked');
		 $('#example3 tbody .iCheck-helper').each(function(){
			 updateRowArray2($(this).siblings().val(),'remove');
			 $(this).parent().removeClass('checked');
		 });
		}
    });
});
var checkRowArray=new Array();//普通查询
var checkRowArray2=new Array();//月份查询

function updateRowArray(str,opt){
	if(opt=='remove'){
		for(i=0;i<checkRowArray.length;i++){
			if(checkRowArray[i]==str){
		       checkRowArray.splice(i,1);
		       break;
			}
		}	
	}else{
		checkRowArray.push(str);
	}
}

function updateRowArray2(str,opt){
	if(opt=='remove'){
		for(i=0;i<checkRowArray2.length;i++){
			if(checkRowArray2[i]==str){
		       checkRowArray2.splice(i,1);
		       break;
			}
		}	
	}else{
		checkRowArray2.push(str);
	}
}

function selectForm1(){
	$('#form1').attr('action','myLife!costExportInit.html');
	$('#form1').submit();
}

function exportSelectRow(exportType){
    var exportRowId="";
    var checkRowArray3;
	if(exportType=='1'){
		checkRowArray3=checkRowArray;
	}else{
		checkRowArray3=checkRowArray2;
	}
	for(i=0;i<checkRowArray3.length;i++){
	  exportRowId=exportRowId+checkRowArray3[i]+",";
	}
	exportRowId=exportRowId.substring(0,(exportRowId.length)-1);
	return location="myLife!exportSelectInfos.html?publicMap.exportRowId="+exportRowId;
}

function exportByExample(opt){
	if(opt==2){
	 return location="myLife!exportInfosByExample.html?publicMap.costDateOfYear="+$('#costDateOfYear').val()+"&publicMap.costDateOfMonth="+$('#costDateOfMonth').val()+"&publicMap.costDateOfType="+$('#costDateOfType').val()+"&publicMap.opt=2";
	}else{
	 return location="myLife!exportInfosByExample.html?publicMap.costDateArea="+$('#reservation').val()+"&publicMap.costType="+$('#costType').val()+"&publicMap.opt=1";		
	}
}
</script>
<title>开销单据导出</title>
</head>
<body class="skin-blue">

<div class="wrapper">

 <header class="main-header">
 <s:action name="main!navbar" executeResult="true"></s:action>
 </header>
 <aside class="main-sidebar">
   <s:action name="main!menu" executeResult="true"></s:action>
 </aside>


<div class="content-wrapper">
 <section class="content-header">
   <h1>开销管理<small>开销单据导出</small></h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li><a href="#">开销管理</a></li>
      <li class="active">开销单据导出</li>
   </ol>
 </section>
 <!-- 页面内容 start -->
 <section class="content">
   <div class="row">
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:red;">本年消费</span>
           <span class="info-box-number">${costCountInfos.yearCost}元</span>
         </div>
       </div>     
     </div>
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:green;">本月消费</span>
           <span class="info-box-number">${costCountInfos.monthCost}元</span>
         </div>
       </div>
     </div>
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:blue;">本周消费</span>
           <span class="info-box-number">${costCountInfos.weekCost}元</span>
         </div>
       </div>
     </div>
     <div class="col-sm-3">
       <div class="info-box" data-toggle="popover" title="Popover title">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text">今日消费</span>
           <span class="info-box-number">${costCountInfos.dayCost}元</span>
         </div>
       </div>
     </div>
   </div>
   <form method="post" id="form1">
   <div class='row'>
     <div class='col-md-12'>
       <div class="box box-primary">
         <div class="box-header">
            <i class="fa fa-edit"></i>
            <h3 class="box-title">检索内容导出</h3>
         </div>
         <div class="box-body pad table-responsive">
             <table class="table text-center">
               <tr>
                  <td class="col-sm-4">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-clock-o"></i>&nbsp;&nbsp;日期区间
                      </div>
                      <input type="text" class="form-control pull-right" id="reservation" name="publicMap.costDateArea" value="${publicMap.costDateArea}"/>
                    </div>
                  </td>
                  <td class="col-sm-4">
                    <div class="input-group">
                      <div class="input-group-addon">类型选择</div>
                      <select class="chosen-select chosen-transparent form-control" name="publicMap.costType" id="costType">
                        <option value="">全部</option>
                       <s:iterator value="wordBookList" var="key">
                        <option value="${key.dicEn}">${key.dicCn}</option>
                       </s:iterator>
                      </select>
                    </div>
                  </td>
                  <td class="col-sm-2"><button type="button" class="btn btn-block btn-info btn-flat" onclick="selectForm1();">查询</button></td>
                  <td class="col-sm-1"><button type="button" class="btn btn-block btn-success btn-flat" onclick="exportSelectRow(1);">导出</button></td>
                  <td class="col-sm-1"><button type="button" class="btn btn-block btn-success btn-flat" onclick="exportByExample(1);">按条件导出</button></td>
                 </tr>
             </table>
             <table class="table table-bordered text-center" id="example2">
                <thead>
                 <tr>
                  <td>操作</td>
                  <td>序号</td>
                  <td>日期</td>
                  <td>时间</td>
                  <td>类型</td>
                  <td>名称</td>
                  <td>明细</td>
                  <td>价格</td>
                 </tr>
                </thead>
                <tbody>
                <s:iterator value="costLiveList" var="key" status="var">
                <tr>
                  <td class="col-sm-1">
                    <label for="isShow" class="control-label">
                      <input type="checkbox" class="flat-red" value="${key.id}"/>
                    </label>
                  </td>
                  <td class="col-sm-1">
                    ${var.count}
                  </td>
                  <td class="col-sm-2">
                     <s:date name="costDate" format="yyyy-MM-dd"></s:date>
                  </td>
                  <td class="col-sm-2">
                     ${key.costTime}
                  </td>
                  <td class="col-sm-1">
                     ${key.typeName}
                  </td>
                  <td class="col-sm-2">
                     ${key.name}
                  </td>
                  <td class="col-sm-2">
                     ${key.remark}
                  </td>
                  <td class="col-sm-1">${key.price}</td>
                </tr>
                </s:iterator>
                </tbody>
                <tfoot>
                <tr>
                  <td colspan="1">
                      <label for="isShow" class="control-label">
                        <input type="checkbox" class="flat-red"/>
                      </label>
                  </td>
                  <td colspan="5"></td>
                  <td><strong>总计：</strong></td>
                  <td><strong style="color:green;" id="countPrice">${publicMap.selectCount}元</strong></td>
                  <td></td>
                </tr>
                </tfoot>
             </table>
         </div>
       </div>
     </div>
   </div>
   
   <div class='row'>
     <div class='col-md-12'>
       <div class="box box-primary">
         <div class="box-header">
            <i class="fa fa-edit"></i>
            <h3 class="box-title">月消费统计导出</h3>
         </div>
         <div class="box-body pad table-responsive">
             <table class="table text-center">
               <tr>
                  <td class="col-sm-2">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-clock-o"></i>&nbsp;&nbsp;年份
                      </div>
                     <input type="text" id="costDateOfYear" class="form-control" value="2015" name="publicMap.costDateOfYear" value="${publicMap.costDateOfYear}"/>
                    </div>
                  </td>
                  <td class="col-sm-2">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-clock-o"></i>&nbsp;&nbsp;月份
                      </div>
                      <select class="chosen-select chosen-transparent form-control" id="costDateOfMonth" name="publicMap.costDateOfMonth">
                        <option value="">全部</option>
                        <option value="1">一月</option>
                        <option value="2">二月</option>
                        <option value="3">三月</option>
                        <option value="4">四月</option>
                        <option value="5">五月</option>
                        <option value="6">六月</option>
                        <option value="7">七月</option>
                        <option value="8">八月</option>
                        <option value="9">九月</option>
                        <option value="10">十月</option>
                        <option value="11">十一月</option>
                        <option value="12">十二月</option>
                      </select>
                    </div>
                  </td>
                  <td class="col-sm-4">
                    <div class="input-group">
                      <div class="input-group-addon">类型选择</div>
                      <select class="chosen-select chosen-transparent form-control" name="publicMap.costDateOfType" id="costDateOfType">
                         <option value="">全部</option>
                       <s:iterator value="wordBookList" var="key">
                        <option value="${key.dicEn}">${key.dicCn}</option>
                       </s:iterator>
                      </select>
                    </div>
                  </td>
                  <td class="col-sm-2"><button type="button" class="btn btn-block btn-info btn-flat" onclick="selectForm1();">查询</button></td>
                  <td class="col-sm-1"><button type="button" class="btn btn-block btn-success btn-flat" onclick="exportSelectRow(2);">导出</button></td>
                  <td class="col-sm-1"><button type="button" class="btn btn-block btn-success btn-flat" onclick="exportByExample(2);">按条件导出</button></td>
                 </tr>
             </table>
             <table class="table table-bordered text-center" id="example3">
                <thead>
                 <tr>
                  <td>操作</td>
                  <td>序号</td>
                  <td>日期</td>
                  <td>时间</td>
                  <td>类型</td>
                  <td>名称</td>
                  <td>明细</td>
                  <td>价格</td>
                 </tr>
                </thead>
                <tbody>
                <s:iterator value="costLiveListOfSelect2" var="key" status="var">
                <tr>
                  <td class="col-sm-1">
                    <label for="isShow" class="control-label">
                      <input type="checkbox" class="flat-red" value="${key.id}"/>
                    </label>
                  </td>
                  <td class="col-sm-1">
                    ${var.count}
                  </td>
                  <td class="col-sm-2">
                     <s:date name="costDate" format="yyyy-MM-dd"></s:date>
                  </td>
                  <td class="col-sm-2">
                     ${key.costTime}
                  </td>
                  <td class="col-sm-1">
                     ${key.typeName}
                  </td>
                  <td class="col-sm-2">
                     ${key.name}
                  </td>
                  <td class="col-sm-2">
                     ${key.remark}
                  </td>
                  <td class="col-sm-1">${key.price}</td>
                </tr>
                </s:iterator>
                </tbody>
                <tfoot>
                <tr>
                  <td colspan="1">
                      <label for="isShow" class="control-label">
                        <input type="checkbox" class="flat-red"/>
                      </label>
                  </td>
                  <td colspan="5"></td>
                  <td><strong>总计：</strong></td>
                  <td><strong style="color:green;" id="countPrice">${publicMap.costDateOfCount}元</strong></td>
                  <td></td>
                </tr>
                </tfoot>
             </table>
         </div>
       </div>
     </div>
   </div>
   </form>
 </section>
 <!-- 页面内容 end -->
 </div>
</body>
</html>
		